<template>
	<view style="background-color: #f7f7f7">
		<view class="top">
			<view class="back-btn" @click="backPage()">
				<view class="back-icon"></view>
			</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff" v-if="edit">注册</view>
			<view style="text-align: center; font-size: 35rpx; color: #fff" v-if="!edit">商户资料</view>
			<view class="card">
				<view class="input_line">
					<text>负责人：</text>
					<input class="input" type="text" v-if="edit" v-model="form.director" placeholder="输入负责人姓名" />
					<view v-else>{{ form.director }}</view>
				</view>
				<view class="input_line">
					<text>身份证号码：</text>
					<input class="input" type="text" v-if="edit" v-model="form.idCard" placeholder="输入负责人身份证号码" />
					<view v-else>{{ form.idCard }}</view>
				</view>
				<!-- <view class="input_line">
					<text>手机号：</text>
					<input class="input" type="text" v-if="edit" v-model=" form.mobile" placeholder="输入手机号" />
					<view v-else>{{ form.mobile}}</view>
				</view>
				<view class="input_line" v-if="edit">
					<text>验证码：</text>
					<view class="input" style="color: gray; margin: 0; height: 30rpx; width: 290rpx; display: flex; justify-content: space-between; align-items: center">
						<input style="font-size: 20rpx; width: 160rpx" type="text" v-model="infor.code" placeholder="输入验证码" />
						|
						<text style="color: #4c8efe; padding: 5rpx">获取验证码</text>
					</view>
				</view> -->
				<view class="input_line">
					<text>店名：</text>
					<input class="input" type="text" v-if="edit" v-model="form.name" placeholder="输入店名" />
					<view v-else>{{ form.name }}</view>
				</view>
				<view class="input_line">
					<text>工商营业执照号码：</text>
					<input class="input" type="text" v-if="edit" v-model="form.businessLicenseId" placeholder="输入营业执照号码" />
					<view v-else>{{ form.businessLicenseId }}</view>
				</view>
				<view class="input_line">
					<text>经营区域：</text>
					<input class="input" type="text" v-if="edit" v-model="form.operatingArea" placeholder="选择区县" />
					<view v-else>{{ form.operatingArea }}</view>
				</view>
				<view class="input_line">
					<text>地址：</text>
					<input class="input" type="text" v-if="edit" v-model="form.address" placeholder="输入详细地址" />
					<view v-else>{{ form.address }}</view>
				</view>
			</view>
		</view>
		<view style="height: 400rpx"></view>
		<view class="card">
			<view class="big_title">商家介绍</view>
			<textarea
				style="margin: 20rpx; padding: 10rpx; height: 200rpx; border: 1px solid gray; border-radius: 15px"
				v-if="edit"
				v-model="form.description"
				placeholder="请准确介绍一下公司"
			></textarea>
			<view v-else>{{ form.description }}</view>
		</view>
		<view class="card">
			<view class="big_title">身份证证正反面照片</view>
			<view style="margin: 20rpx; display: flex; justify-content: space-around; align-items: center">
				<image v-if="form.front" :src="form.front" class="image" @click="up(1)"></image>
				<button v-show="edit ? !form.front : false" @click="up(1)">上传文件</button>
				<image v-if="form.opposite" :src="form.opposite" class="image" @click="up(2)"></image>
				<button v-show="edit ? !form.opposite : false" @click="up(2)">上传文件</button>
			</view>
		</view>
		<view class="card">
			<view class="big_title">营业执照</view>
			<image v-if="form.businessLicenseImg" :src="form.businessLicenseImg" class="image" @click="up(3)"></image>
			<button v-show="edit ? !form.businessLicenseImg : false" @click="up(3)">上传文件</button>
		</view>
		<view class="card">
			<view class="big_title">门面照片</view>
			<view v-if="form.facadePhoto" style="width: 100%; display: flex; align-items: center; justify-content: space-around; flex-wrap: wrap">
				<image v-for="(item, index) in form.facadePhoto" :key="index" :src="item" class="image"></image>
			</view>
			<button v-show="edit ? form.facadePhoto.length < 9 : false" @click="up(4)">上传文件</button>
		</view>
		<button @click="saveshanghu()" v-if="edit" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white">保存</button>
		<button @click="edit = !edit" v-if="!edit" style="margin: 50rpx 100rpx; border-radius: 25px; background-color: #5590f8; color: white">修改</button>
	</view>
</template>

<script setup>
import uploadFile from '../../../utils/uploadFile';
import request from '../../../utils/request';
import { ref } from 'vue';
import { onMounted, getCurrentInstance } from 'vue';
function up(e) {
	uploadFile({
		success(res) {
			// console.log("上传",res);
			switch (e) {
				case 1:
					form.value.front = res[0];
					break;
				case 2:
					form.value.opposite = res[0];
					break;
				case 3:
					form.value.businessLicenseImg = res[0];
					break;
				case 4:
					// form.value.facadePhoto=[...form.value.facadePhoto,...res]

					res.forEach((item) => {
						if (form.value.facadePhoto.length< 9) {
							form.value.facadePhoto.push(item);
						}
					});
					break;
				default:
					break;
			}
		},
		fail(err) {
			console.log(err);
		}
	});
}
onMounted(() => {
	const instance = getCurrentInstance().proxy;
	const eventChannel = instance.getOpenerEventChannel();
	eventChannel.on('acceptDataFromOpenerPage', function (data) {
		console.log('acceptDataFromOpenerPage', data);
		const sources = [data.userinfo, data.shanghuinfo];
		sources.forEach((source) => {
			form.value = {
				...form.value,
				...Object.fromEntries(Object.entries(source).filter(([key]) => key in form.value))
			};
		});
		data.imgs.forEach((it) => {
			form.value.facadePhoto.push(it.img);
		});
		console.log(form.value);
	});
});
function backPage() {
	uni.navigateBack();
}

let form = ref({
	mid: null,
	director: null,
	idCard: null,
	mobile: null,
	businessLicenseId: null,
	businessLicenseImg: null,
	front: null,
	opposite: null,
	name: null,
	operatingArea: null,
	regTime: null,
	startTime: null,
	endTime: null,
	address: null,
	longitude: null,
	latitude: null,
	description: null,
	rate: null,
	status: 0,
	del: 0,
	auditStatusId: 0,
	facadePhoto: []
});
const edit = ref(false);

function saveshanghu() {
	request({
		url: 'merchant/merchant/editinfor',
		method: 'post',
		data: { ...form.value, userid: uni.getStorageSync('userinfo').id },
		success(res) {
			console.log(res);
			edit.value = !edit.value;
			uni.showToast({
				title: '保存成功',
				icon: 'success'
			});
		},
		fail(res) {
			uni.showToast({
				title: '保存失败',
				icon: 'error'
			});
			console.log(res);
		}
	});
}
</script>

<style>
@import '@/common/app.css';
.card {
	border-radius: 20px;
	background-color: #fff;
	margin: 30rpx;
	padding: 30rpx 20rpx;
}
.input_line {
	font-weight: 500;
	margin: 30rpx 10rpx;
	padding-left: 20rpx;
	display: flex;
	justify-content: space-between;
	align-items: center;
}
.input {
	border: 1px solid gray;
	padding: 10rpx 15rpx;
	border-radius: 20px;
	font-size: 20rpx;
	font-weight: 600;
}
.big_title {
	margin-left: 20rpx;
	font-weight: 600;
}
.upload-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	cursor: pointer;
}
.plus-icon {
	font-size: 40px;
	color: #ccc;
	margin-bottom: 10px;
}
.upload-text {
	font-size: 12px;
	color: #999;
}

.back-btn {
	margin-left: 20rpx;
	width: 50rpx;
	height: 50rpx;
	position: relative;
}
.back-icon {
	width: 30px;
	height: 30px;
}
.back-icon::before {
	content: '';
	position: absolute;
	width: 20px;
	height: 2px;
	background-color: #fff;
	top: 80rpx;
	left: 47rpx;
	transform: translate(-50%, -50%);
}
.back-icon::after {
	content: '';
	position: absolute;
	width: 10px;
	height: 10px;
	border-left: 2px solid #fff;
	border-bottom: 2px solid #fff;
	transform: rotate(45deg);
	top: 70rpx;
	left: 30rpx;
}
.image {
	height: 300rpx;
	width: 150rpx;
	margin: 10rpx 10rpx;
}
</style>
